<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaImpl" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaResponse" %>
<%@taglib prefix="cp" uri="ContactPortal" %>
<%@taglib prefix="st" uri="/struts-tags" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Register Contact Portal</title>
        <script type="text/javascript" src="assets/js/js_utils/MatchPwds.js"></script>
        <script type="text/javascript" src="assets/js/recaptcha-skin.js"></script>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        
    </head>
    <body class="claro">
        <span id="messageSpan" style="color: red"></span>
        <div dojoType="dijit.form.Form" id="registerForm" jsId="myForm" encType="multipart/form-data"
             action="validatecaptcha.jsp" method="get" onsubmit="verifyPwd">
            <script type="dojo/method" event="onReset">
                return confirm('Press OK to reset widget values');
            </script>
            <script type="dojo/method" event="onSubmit">
                if (this.validate()) {
                return true;
                } else {
                alert('Form contains invalid data.  Please enter valid data');
                return false;
                }
                return true;
            </script>

            <table border="0" cellspacing="10" align="center">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                        <td><input type="text" 
                                   placeholder="Choose Username"
                                   dojoType="dijit.form.ValidationTextBox" 
                                   name="username"
                                   regExp="\w{8,12}"
                                   invalidMessage="invalid username"
                                   promptMessage="username min 8 max 12 chars"
                                   intermediateChanges="false"
                                   required="true"/></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td><input type="password"
                                   placeholder="password"
                                   name="password"
                                   id="password1"
                                   dojoType="dijit.form.ValidationTextBox"
                                   required="true"
                                   intermediateChanges=false
                                   invalidMessage="Please type a password" /></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td><input type="password"
                                   placeholder="confirm password"
                                   name="password2"
                                   id="password2"
                                   dojoType="dijit.form.ValidationTextBox"
                                   required="true"
                                   constraints="{'other': 'password1'}"
                                   validator=confirmPassword
                                   intermediateChanges=false
                                   invalidMessage="passwords doesn't match" /></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td><input id="email" 
                                   placeholder="email"
                                   name="email"
                                   data-dojo-type="dijit.form.ValidationTextBox"
                                   data-dojo-props="validator:dojox.validate.isEmailAddress,
                                   invalidMessage:'This is not a valid email!'"
                                   /></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td><input type="text"
                                   placeholder="Mobile No"
                                   dojoType="dijit.form.ValidationTextBox"
                                   required="true"
                                   regExp="\d{10}"
                                   invalidMessage="Mobile number is not valid"
                                   name="mobile"
                                   min="10"/></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td><input type="text" 
                                   placeholder="Date of Birth"
                                   name="date" 
                                   dojoType="dijit.form.DateTextBox"
                                   required="true" 
                                   ></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td> <input type="radio" 
                                    name="sex" 
                                    id="radioOne" 
                                    checked value="Male" 
                                    dojoType="dijit.form.RadioButton"/>
                            <label for="radioOne">
                                Male
                            </label>
                            <input type="radio" 
                                   dojoType="dijit.form.RadioButton" 
                                   name="sex" 
                                   id="radioTwo"
                                   value="Female" />
                            <label for="radioTwo">
                                Female
                            </label></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td><textarea id="myarea" 
                                      name="addr" 
                                      dojoType="dijit.form.Textarea"
                                      style="width: 200px"
                                      maxlength="100"
                                      placeholder="Enter your address"></textarea></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td>
                            <c:if test="${sessionScope.msg eq 'invalid'}">
                                <div id="divSecureMsg" style="color: red;font-weight: bold">security check failed</div>
                            </c:if>
                            <cp:SecurityCheckUI /></td>
                        <td></td>
                    </tr>
                    <tr>

                        <td><button dojoType="dijit.form.Button" type="submit" >Submit</button> <button dojoType="dijit.form.Button" type="reset">Reset</button></td>

                    </tr>

                </tbody>
            </table>

        </div>
    </body>
</html>
